<template>
  <div id="app">
    <h1>黑马头条</h1>
    <i class="toutiao toutiao-dianzan"></i>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>

    <div style="font-size: 32px">字体</div>
    <div class="font-32">字体</div>
    <router-view/>
  </div>
</template>

<script>
/*
  1. 在通过vscode开启项目时 一定要把根目录设置为项目文件夹(如果不这样设置 可能自动格式化会失效)
  2. 虽然设置了通过eslint配置自动格式化插件 但是希望各位可以慢慢脱离该插件
*/

/*
  postcss-pxtorem 插件只能修改内部样式表、外部样式表中的px
  不可以修改行内样式表中的px设置
  =>
  以下内容只针对与距离(px)相关的样式
  1. 在移动端布局时 基本上使用内部样式表、外部样式表来设置
  2. 当需要固定某个纵坐标高度时 可以使用行内样式

  设计稿上写的文字像素为66px 你就应该在代码里写66px 但是设计稿的视口比正常页面大了一倍 所以
*/
export default {
  name: 'App',
  data () {
    return {

    }
  }
}
</script>

<style lang="less" scoped>
  .font-32 {
    font-size: 32px;
  }
</style>
